<!DOCTYPE html>
<html>
    <head>
        <title>jQuery UI sortable()实现拖动排序</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="../../lib/jquery/jquery-1.11.3.js"></script>
        <script src="../../lib/jquery-ui/jquery-ui.js"></script>
    </head>
    <body>
       <script>
       	var beforeSort = [];
       	var afterSort = [];
        $(function() {
          $( ".sortable" ).sortable({
          cursor: "move",
          items :"tr",                        //只是li可以拖动
          opacity: 0.6,                       //拖动时，透明度为0.6
          revert: true,                       //释放时，增加动画
          start : function(event,ui) {
        	  beforeSort = $(this).sortable("toArray");
        	  console.log('排序前'+beforeSort);
          },
          update : function(event, ui){       //更新排序之后
        	  afterSort = $(this).sortable("toArray");
              console.log('排序后' + afterSort);
          }
         });
       });
      </script>
     <!--  <ul class="sortable">
        <li class="ui-state-default"  id="1">第1项</li>
        <li class="ui-state-default"  id="2">第2项</li>
        <li class="ui-state-default"  id="3">第3项</li>
      </ul> -->
      
      
      <table class="sortable">
      	<tr id="1">
      		<td>第一项</td>
      		<td>提交</td>
      	</tr>
      	<tr id="2">
      		<td>第二项</td>
      		<td>提交</td>
      	</tr>
      	<tr id="3">
      		<td>第三项</td>
      		<td>提交</td>
      	</tr>
      </table>
    </body>
</html>